class Page {
	constructor(options) {
		this.url = options.url;
		this.list = options.list;
		this.pageBox = options.pageBox;
		this.num = options.num;
		this.index = options.index;
		// 使用ajax加载数据
		this.load();
	}
	
	load(){
		var that = this;
		$.ajax({
			url: this.url,
			success: function(res){
				that.res = res;
				//请求到数据后可以先加载页码,在加载页码的时候渲染页面
				that.pageCreate()
				
			}
		})
	}
	pageCreate() {
		var that = this;
		this.pageBox.pagination(this.res.length, {
			items_per_page: this.num,
			current_page: this.index,
			prev_text: "上一页",
			next_text: "下一页",
			callback: function(i) { //callback会自带一个参数,是当前下标
				that.index = i; //当点击到哪页,下标会自动改变
				that.display(); //渲染页面
			}
		})
	}
	display() {
		var str = "";
		// 求每页渲染几个:
		// this.index*this.num---this.index*this.num+this.num
		for (var i = this.index * this.num; i < this.index * this.num + this.num; i++) {
			//最后一页出现问题,先判断i小于所有的数据的长度
			if (i < this.res.length) {
				str +=
					`<li>
						<div class="goods-pic"><a id="pic_tiaozhuan" goodid="${this.res[i].id}"><img src="${this.res[i].img}"></a></div>
						<div class="goods-name">
							<a>${this.res[i].info}</a>
						</div>
						<div class="goods-price">
							<ins class="price">￥${this.res[i].price}</ins>
							<del class="price">￥${this.res[i].price}</del>
						</div>
						<div class="goods-buy">
							<span class="p-quantity">							
							<a href="javascript:void(0);" class="btn-decrease updatacount" number="-1">-</a>
							<input type="text" min="1" max="2" size="2" name="goods[num]" class="action-quantity-input" value="1">
							<a href="javascript:void(0);" class="btn-increase updatacount" number="1">+</a>

							<a class="btn" pid='${this.res[i].id}' pname=${this.res[i].info} price=${this.res[i].price} psrc=${this.res[i].img} href="javascript:;">加入购物车</a>
						</div>
					</li>`
			}

		}
		$(this.list).html(str);
	}
}
new Page({
	url: "http://localhost/project/data/list1.json",
	list: $("#list ul"),
	pageBox: $("#Pagination"),
	num: 12,
	index: 0
})

//点击加入购物车按钮的实现
$("#list ul").on("click",".btn",function(){
	
	var getlocal=JSON.parse(localStorage.getItem("userMsg"))
	var isLogin=false;
	for(var i in getlocal){
		if(getlocal[i].onoff==1){
			isLogin=true;
		}
	}
	if(!isLogin){
		location.href="http://localhost/project/login.html"
		return;
	}
	//购物车累加数量
	$(".top_car .top_car_count").html(Number($(".top_car .top_car_count").html())+1);
	
	var flag=true;
	//创建数组存放对象数据
	var arr=[];
	var obj={//获取自定义属性
		"id":$(this).attr("pid"),
		"name":$(this).attr("pname"),
		"price":$(this).attr("price"),
		"src":$(this).attr("psrc"),
		"count":1
	}
	//因为每次点击时arr会清空，将cookie中的数据存起来，赋给arr
	var brr=getCookie("shoplist")
	if(brr.length!=0){//第一次cookie是空的直接追加，从点击一次之后开始赋值
		arr=JSON.parse(brr);
		for(var i=0;i<arr.length;i++){
			if(obj.id==arr[i].id){
				arr[i].count++;
				flag=false;
				break;
			}
		}
	}
	if(flag){
		arr.push( obj );
	}
	setCookie("shoplist",JSON.stringify(arr));
})

//增减减少商品数量
// $(".updatacount").click(function(){
// 	var sign=$(this).attr("number");
// 	var count=$(this).parent().find(".action-quantity-input").val()
// 	if(sign=="-1"&&count==1){
// 		return;
// 	}
// 	for(var i=0;i<brr.length;i++){
// 		if(id==brr[i].id){
// 			brr[i].count+=Number(sign);
// 			setCookie("shoplist",JSON.stringify(brr));
// 			$(this).parent().find(".action-quantity-input").val(brr[i].count)
// 			$(this).parent().parent().find(".p_total").html(+brr[i].count*brr[i].price+'.00')
// 			jiesuan()
// 		}
// 	}
// })


//统计商品数量,将每个商品的count进行累加
function getCount(){
	var brr=getCookie("shoplist");
	var count=0;
	if(brr.length!=0){
		for(var i=0;i<brr.length;i++){
			count+=brr[i].count;
		}
		$("#car span").html(count);
		$(".top_car .top_car_count").html(count)
	}
}


//页面的跳转
$("#list ul").on("click","#pic_tiaozhuan",function(){
	var goodid=$(this).attr('goodid')
	var str="xiangqing.html"+"?"+"id="+goodid;
		window.open(str)//跳转页面	
})

